    
    <h3 style="background-color: #f0f0f0;text-align: center; margin: 0 0 10px 0;">产品类别管理</h3>      
    <div class="main-container">
        <!-- 表格区域 -->
        <div class="tables-container">
            <!-- 左侧表格 - 35%宽度 --> 
            <div class="table-container left-table">
                <h4 style="text-align: center; margin: 0 0 10px 0;">行业类别列表</h4>
                <table id="leftTable">
                    <thead>
                        <tr id="main-header"> 
                        </tr>
                    </thead>
                    <tbody id="main-tbody">
                        <!-- 数据将通过JavaScript生成 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 右侧表格 - 65%宽度 -->
            <div class="table-container right-table"> 
                <h4 style="text-align: center; margin: 0 0 10px 0;">行业的产品类别列表</h4>
                <table id="rightTable">
                    <thead>
                        <tr id="child-header"> 
                        </tr>
                    </thead>
                    <tbody id="child-body">
                        <!-- 数据将通过JavaScript生成 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 操作面板区域 -->
        <div class="panels-container"> 
            <div class="panel left-panel" id="leftPanel">
               <!-- 
                <button class="btn btn-primary" id="leftAddBtn" onClick="addNew(1)">新增/new item</button>
                <button class="btn btn-warning" id="leftEditBtn" onClick="editItem(1)">编辑/Edit</button> 
                 -->
              <h4 style="text-align: center; margin: 0 0 10px 0;">请选择列上表中的具体行</h4>
            </div> 
            <div class="panel right-panel" id="rightPanel">
                <button class="btn btn-primary" id="rightAddBtn" onClick="addNew()">新增/new item</button> 
                <button class="btn btn-warning" id="rightEditBtn" onClick="editItem()">编辑/edit</button>
                <button class="btn btn-danger" id="rightDeleteBtn" onClick="delItem()">删除/delete</button> 
                
                <input type="checkbox" name="showAlert" value=1 id="showAlert"> 
                <label for="showAlert">操作成功提示</label>
                
            </div>
        </div> 
    </div> 
    
    <div id="edit-modal" class="modal">
        <div class="modal-content-4">
            <h3 class="modal-title">编辑产品分类(Edit Category)</h3>
            <table class="no-hover" border=0 width="90%" align="center" >
                <tr>
                    <td width="25%" style="text-align: right;">代码:</td>
                    <td width="75%"><input type="text"  style="height:26px" name="pcode" value="" size="4" readonly>
                    <input type="hidden" name="ycode"  value="">
                    </td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">中文名:</td>
                    <td width="75%"><input type="text" style="height:26px" name="cname" value="" size="36"></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">英文名:</td>
                    <td width="75%"><input type="text" style="height:26px" name="ename" value="" size="64"></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">状态:</td>
                    <td width="75%"> 
                       <input type="radio" name="status" value="0" id="s0">
                       <label for="s0">无效</label>&nbsp;&nbsp;&nbsp;
                       <input type="radio" name="status" value="1" id="s1">
                       <label for="s1">有效</label>
                    </td>
                </tr>
            </table> 
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="closeModal()">取消</button>
                <button class="modal-btn save-btn" onclick="saveChanges()">保存</button>
            </div>
        </div>
    </div>
    
<script>
	var header1 = [["编码","Code"],["中文名","Chinese name"],["英文名","Englisg name"],["有效否","validStatus"]];
	var buttons = [["新增","add new"],["保存","save"],["删除","delete"]];
	var industryList = null;
	var productList = null;
	
	var industryCode = null;
	var productCode = null;
	
	  
	function setProductCode(pcode){
		productCode = pcode;
	}
	
	function selectAndScrollTable(item,tv=0){
		if(tv == 0 ){ 
			var row = findRowInTbaleBodyByColumnValue("leftTable",0,item["ycode"]);
			if(row>=0){
				selectAndScrollToRow("leftTable",row+1);  //thead作为第一行
				showProductList(item["ycode"]);
			}
			var row = findRowInTbaleBodyByColumnValue("rightTable",0,item["ycode"]);
			if(row>=0){
				selectAndScrollToRow("rightTable",row+1);  //thead作为第一行
				setProductCode(item["ycode"]);
			}
		}else{ 
			var row = findRowInTbaleBodyByColumnValue("rightTable",0,item["pcode"]);
			if(row>=0){
				selectAndScrollToRow("rightTable",row+1);  //thead作为第一行
				setProductCode(item["pcode"]);
			}
		} 
	}
	
	function saveChanges(){
		var item={"ycode":getInputValue("ycode"),
				"pcode":getInputValue("pcode"),
				"cname":getInputValue("cname"),
				"ename":getInputValue("ename"),
				"status":getInputValue("status"),
				};
		//alert(JSON.stringify(item,null,2)); 
		if(item["cname"].length < 2 || item["cname"].length > 12){
			alert("cname , over 12 chars or less 3 chars");
			focus("cname");
			return;
		}
	    if(item["ename"].length < 3 || item["ename"].length > 21){
	    	alert("ename , over 21 chars or less 3 chars");
			focus("ename");
	    	return;
		}
	    var url = product_save_uri;
	    var token = curUser["token"];  
		ajaxPostJson(url , token, item , function(status,ret){
				  console.log("Status="+status);
				  console.log("save return="+JSON.stringify(ret,null,2)); 
				  if(ret.status==1){
					  updateProductList(ret["data"]);
					  closeModal();
					  if(getInputValue("showAlert")==1){
						  alert("Save Succeed!"); 
					  } 
				  }else{
					  alert(JSON.stringify(ret,null,2));  
				  }
		});
	}
	
	function showDataOn(item){ 
		setInputValue("ycode",item["ycode"]);
		setInputValue("pcode",item["pcode"]);
		setInputValue("cname",item["cname"]);
		setInputValue("ename",item["ename"]);
		setInputValue("status",item["status"]); 
		focus("cname");
	}
	
	function getProductItem(c){
		debugger;
		for (let i = 0; i < productList.length; i++) { 
	    	 let v = productList[i];
	    	 if(v["pcode"] == c){
	    		 return v;
	    	 }
		}
		return null;
	}
	
	function showHeader(headerId,lang='cn'){
		debugger;
		 const row = document.getElementById(headerId);
		 let html = '';
	     for (let i = 0; i < header1.length; i++) { 
	    	 if(lang=='cn'){
	    		 html += "<th>"+ header1[i][0] +"</th>"; 
	    	 }else{
	    		 html += "<th>"+ header1[i][1] +"</th>"; 
	    	 } 
	     }
		 row.innerHTML = html ;
	}  
	
    function newItem(icode){
    	debugger;
    	var next = null;
    	var index = 0;
    	var no = 0;
    	for (let i = 0; i < productList.length; i++) { 
    		let v = productList[i];
    		if(v["pcode"].startsWith(icode)==false){
    			if(index>0){
    				break;
    			}
    			continue;
    		}
    		index = index +1;
    		no = parseInt(v["pcode"].substring(3), 10);
    		if(no > index){
    			next = index ;
    			break;
    		}else{
    			next = no + 1;
    		}
    	}
    	if(next == null){
    		next = 1;
    	}
    	var s = String(next);
		while(s.length<3){
			s = "0" + s;
		}
		next = icode + s; 
    	var item = {"ycode":icode,"pcode":next,"cname":"","ename":"","status":1};
    	return item;
    }
    
	function addNew(){
		debugger;
		var item = null;
		if(industryCode == null || industryCode.length<2){
			alert("Please select one inductry!");
			return ;
		}		 
		item = newItem(industryCode);			 
		openEditModal();
		showDataOn(item); 
	}

	function editItem(){
		 
		var item = null;
		if(productCode == null){
			alert("Please select child category!");
			return;
		}
		item = getProductItem(productCode);  
		if(item == null){
			alert("Please select item first!");
			return;
		} 
		openEditModal();
		showDataOn(item);
	}
	
	function updateProductList(item){
		debugger;
		var  pos = -1; //insert position
		var find = false;
		for (let i = 0; i < productList.length; i++) { 
			let v = productList[i];
			if(v["ycode"] != item["ycode"]){  //.startsWith(item["ycode"])==true){
				continue;
			}
			if( item["pcode"] == v["pcode"] ){
				productList[i] = item;
				find = true;
				break; 
			}
			if( item["pcode"] < v["pcode"] ){
				pos = i;
				break;
			}else{
				pos = i+1;
			}
		}
			
		if(find == false){
			if(pos < productList.length ){
				productList.splice(pos,0,item);
			}else{
				productList.push(item);
			}  
		} 
		showProductList(item["ycode"]); 
		selectAndScrollTable(item,1); 
	}
		
	function removeProduct(index){
		productList.splice(index, 1);
		if( productList.length == index  ){
			index = index - 1 ;
		} 
		showProductList(industryCode);  
		if(index >= 0  && index < productList.length){
			var item = productList[index]; 
			productCode = item["pcode"];
			selectAndScrollTable(item,1); 
		}else{
			productCode = null;
		}
	}
	
	function delItem(){
		//alert("edit item,rCode="+rightCode+",lCode="+leftCode);
		debugger;
		var code = productCode;
		if(code == null){
			return;
		}
		var index = -1;
		for (let i = 0; i < productList.length; i++) { 
			let v = productList[i];
			if(v["pcode"] == code ){
				index = i;
				break;
			}
		}
		if(index < 0){
			return;
		} 
	 
		var url = product_del_uri;
		var data={"pcode":code,"ycode":industryCode};
		
		var token = curUser["token"];
		ajaxPostJson(url,token, data, function(status,ret){
			if(status==0){
				if(ret["status"]==1){ 
					removeProduct(index);
				}else{
					alert("处理失败\r\n" + ret["errorCode"] +":" + ret["desc"]);
				}
			}else{
				alert("请求异常\r\n"+ ret);
			}
		});
	}

	function showInductryTableBody(bodyId){
		debugger;
		if(industryList == null){
			alert("list is null!");
			return;
		}  
		const body = document.getElementById(bodyId);
		let html = '';
	    for (let i = 0; i < industryList.length; i++) { 
	    	 let v = industryList[i];
	    	 if(v["ycode"].length == 1){ //一级 行业 不显示
        		 continue;
        	 } 
	    	 html += "<tr onClick=\"showProductList(\'"+v["ycode"]+"')\">"; 
	    	  
	    	 if(v["status"] != 1){
	    		 html += 
	                 "<td><font color='red'>"+v["ycode"]+"</font></td>"+
	                 "<td><font color='red'>"+v["cname"]+"</font></td>"+
	                 "<td><font color='red'>"+v["ename"]+"</font></td>";
	    	 }else{
	    		 html += 
	                 "<td>"+v["ycode"]+"</td>"+
	                 "<td>"+v["cname"]+"</td>"+
	                 "<td>"+v["ename"]+"</td>";
	    	 }  
	        if(currentLang=='cn'){
	        	if(v["status"] != 1){ 
	            	html += "<td><font color='red'>无效</font></td>";
	            }else{
	            	html += "<td>有效</td>";
	            }
	        }else{
	        	if(v["status"] != 1){ 
	        		html += "<td><font color='red'>no</font></td>";
	            }else{
	            	html += "<td>yes</td>"; 
	            }
	        } 
	        html += "</tr>"; 
	    }
	    body.innerHTML = html ;
	} 
	
	function showProductTableBody(tableId,ycode){
		debugger;
		if(productList == null){
			alert("list is null!");
			return;
		} 
		 
		const body = document.getElementById(tableId);
		let html = '';
	    for (let i = 0; i < productList.length; i++) { 
	    	 let v = productList[i];
	    	 if(v["ycode"] != ycode){  
        		 continue;
        	 }
	    	 html += "<tr onClick=\"setProductCode(\'"+v["pcode"]+"')\">"; 
	    	 if(v["status"] != 1){
	    		 html += 
	                 "<td><font color='red'>"+v["pcode"]+"</font></td>"+
	                 "<td><font color='red'>"+v["cname"]+"</font></td>"+
	                 "<td><font color='red'>"+v["ename"]+"</font></td>";
	    	 }else{
	    		 html += 
	                 "<td>"+v["pcode"]+"</td>"+
	                 "<td>"+v["cname"]+"</td>"+
	                 "<td>"+v["ename"]+"</td>";
	    	 }  
	        if(currentLang=='cn'){
	        	if(v["status"] != 1){ 
	            	html += "<td><font color='red'>无效</font></td>";
	            }else{
	            	html += "<td>有效</td>";
	            }
	        }else{
	        	if(v["status"] != 1){ 
	        		html += "<td><font color='red'>no</font></td>";
	            }else{
	            	html += "<td>yes</td>"; 
	            }
	        } 
	        html += "</tr>"; 
	    }
	    body.innerHTML = html ;
	}
	
	function showProductList(ycode){
		debugger;
		showProductTableBody("child-body",ycode);
		setupRowHighlight("rightTable");
		industryCode = ycode;
		productCode = null; 
	} 
	 
	function switchContantLang(){
		//alert("content to lang:"+currentLang);
	}

	function showIndustryList(){
		showInductryTableBody("main-tbody");
		setupRowHighlight("leftTable");
	}
	
	function readIndustryList(){ 
		var url = industry_list_uri+"/"; 
		debugger;
		ajaxGetJson(url , function(status,ret){
			  console.log("Status="+status);
			 // console.log("list Data="+JSON.stringify(ret,null,2)); 
			  if(status==0){
				  if(ret.status==1){  
					  industryList = ret["data"];   
					  showIndustryList(); 
				  }else{
					  alert("Error:"+ret["errorCode"]+"\r\nMsg="+ret["desc"]);  
				  }
			  }else{
				  alert("httpStatus="+status+"\r\nErrorMsg="+ret);
			  } 
	    },true);
	}
	
	function readProductList(){ 
		var url = product_list_uri+"/"; 
		debugger;
		ajaxGetJson(url , function(status,ret){
			  console.log("Status="+status);
			 // console.log("list Data="+JSON.stringify(ret,null,2)); 
			  if(status==0){
				  if(ret.status==1){  
					  productList = ret["data"];    
				  }else{
					  alert("Error:"+ret["errorCode"]+"\r\nMsg="+ret["desc"]);  
				  }
			  }else{
				  alert("httpStatus="+status+"\r\nErrorMsg="+ret);
			  } 
	    },true,null);
	}
        
    var industryList = null;
    var productList = null;
    
    showHeader("main-header",currentLang);
    showHeader("child-header",currentLang);
    
    readIndustryList(); 
    readProductList();//  
    
</script>
